import { ListBullets, CircleNotch, FunnelSimple, ArrowsOut } from "@phosphor-icons/react";
import { Popover, usePopover, TopBarButton } from "@sd/ui";
import clsx from "clsx";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { motion, AnimatePresence } from "framer-motion";
import { JobList } from "./components/JobList";
import { useJobCount } from "./hooks/useJobCount";
import { useJobManager } from "./hooks/useJobManager";
import { CARD_HEIGHT } from "./types";

interface JobManagerPopoverProps {
  className?: string;
}

export function JobManagerPopover({ className }: JobManagerPopoverProps) {
  const navigate = useNavigate();
  const popover = usePopover();
  const [showOnlyRunning, setShowOnlyRunning] = useState(true);

  // Lightweight hook for trigger badge/icon
  const { activeJobCount, hasRunningJobs } = useJobCount();

  // Reset filter to "active only" when popover opens
  useEffect(() => {
    if (popover.open) {
      setShowOnlyRunning(true);
    }
  }, [popover.open]);

  return (
    <Popover
      popover={popover}
      trigger={
        <button
          className={clsx(
            "w-full relative flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium",
            "text-sidebar-inkDull hover:text-sidebar-ink hover:bg-sidebar-selected/40",
            "transition-colors",
            className
          )}
        >
          <div className="size-4">
            {hasRunningJobs ? (
              <CircleNotch className="animate-spin" weight="bold" size={16} />
            ) : (
              <ListBullets weight="bold" size={16} />
            )}
          </div>
          <span>Jobs</span>
          {activeJobCount > 0 && (
            <span className="flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-accent rounded-full">
              {activeJobCount}
            </span>
          )}
        </button>
      }
      side="top"
      align="start"
      sideOffset={8}
      className={clsx(
        "w-[360px] max-h-[480px] z-50",
        "!p-0 !bg-app !rounded-xl"
      )}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-app-line">
        <h3 className="text-sm font-semibold text-ink">Job Manager</h3>

        <div className="flex items-center gap-2">
          {activeJobCount > 0 && (
            <span className="text-xs text-ink-dull">
              {activeJobCount} active
            </span>
          )}

          {/* Expand to full screen button */}
          <TopBarButton
            icon={ArrowsOut}
            onClick={() => navigate("/jobs")}
            title="Open full jobs screen"
          />

          {/* Filter toggle button */}
          <TopBarButton
            icon={FunnelSimple}
            active={showOnlyRunning}
            onClick={() => setShowOnlyRunning(!showOnlyRunning)}
            title={showOnlyRunning ? "Show all jobs" : "Show only active jobs"}
          />
        </div>
      </div>

      {/* Popover content with full job manager */}
      {popover.open && (
        <JobManagerPopoverContent
          showOnlyRunning={showOnlyRunning}
          setShowOnlyRunning={setShowOnlyRunning}
        />
      )}
    </Popover>
  );
}

function JobManagerPopoverContent({
  showOnlyRunning,
  setShowOnlyRunning,
}: {
  showOnlyRunning: boolean;
  setShowOnlyRunning: (value: boolean) => void;
}) {
  // Full job manager with progress subscriptions (only when popover is open)
  const { jobs, pause, resume } = useJobManager();

  const filteredJobs = showOnlyRunning
    ? jobs.filter((job) => job.status === "running" || job.status === "paused")
    : jobs;

  return (
    <motion.div
      className="overflow-y-auto no-scrollbar"
      initial={false}
      animate={{
        height:
          filteredJobs.length === 0
            ? CARD_HEIGHT + 16
            : Math.min(filteredJobs.length * (CARD_HEIGHT + 8) + 16, 400),
      }}
      transition={{ duration: 0.2, ease: [0.25, 1, 0.5, 1] }}
    >
      <JobList jobs={filteredJobs} onPause={pause} onResume={resume} />
    </motion.div>
  );
}
